<template>
  <div class="my-address">
    <van-nav-bar
      title="添加地址"
      left-arrow
      :fixed=true
      :border=true
      @click-left="handleToBack">
      </van-nav-bar>
      <!-- 图片占位 -->
      <div class="no-content" v-show="userAddress.length < 1">
        <img src="../../../assets/img/order/noAddress.png" alt="">
        <span class="desc">还没有地址呢，添加一个吧</span>
      </div>
      <!-- 添加联系人 -->
      <van-address-list
        class="address-btn"
        v-model="chosenAddressId"
        :list="userAddress"
        @add="onAdd"
        @edit="onEdit"
        @select="onBackAddress"
        style="margin-top: 52px"
        add-button-text="新增地址">
      </van-address-list>
    <!-- 路由出口 -->
    <transition name="router-slider"  mode="out-in">
      <router-view />
    </transition>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import { getLocalStore } from '@/config/global'
import { CHOOSE_USER_ADDRESS } from '@/config/pubsub-type'
import PubSub from 'pubsub-js'
export default {
  name: 'MyAddress',
  data () {
    return {
      chosenAddressId: 0
    }
  },
  computed: {
    ...mapGetters(['userAddress'])
  },
  mounted () {
    this.initUserShoppingAddress()
  },

  methods: {
    handleToBack () {
      this.$router.back()
    },
    onAdd () {
      this.$router.push({
        path: '/order/myAddress/addAddress'
      })
    },
    onEdit () {
      this.$router.push({
        name: 'EditAddress',
        params: {
          content: item
        }
      })
    },
    onBackAddress (item, index) {
      // 发布通知到订单界面修改值
      PubSub.publish(CHOOSE_USER_ADDRESS, item)
      this.$router.back()
    },
    ...mapMutations({
      initUserShoppingAddress: 'INIT_USER_SHOPPING_ADDRESS'
    })
  }
}

</script>
<style lang='scss' scoped>
.my-address {
  @include setAllcover(200);
  background-color: $text-color-white;
  .no-content {
    @include setWH(100%, 100%);
    @include flexType(center);
    flex-direction: column;
    img {
      @include setWH(40%, 20%);
    }
    .desc {
      @include setFontColor(px2rem(10), $text-color-pl);
    }
  }
   /*转场动画*/
  .router-slider-enter-active,
  .router-slider-leave-active {
    transition: all .3s;
  }
  .router-slider-enter,
  .router-slider-leave-active {
    transform: translate3d(px2rem(35), 0, 0);
    opacity: 0;
  }
  .van-address-list__add {
    bottom: px2rem(17.5);
  }
  .van-button--large {
    left: 15%;
    width: 70%;
    border-radius: px2rem(35);
    background-color: $theme-clor-green;
    border: none;
  }
}
</style>
